<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <style>
            .ui-state-highlight.ui-selected {
                color: blueviolet;
            }
            .ui-commandButton-wizard-selected{
                background-color: #D20005;
                font-weight: bold;
                color: #000000;
            }
            .ui-commandButton-wizard-unselected{
                background-color: #D20005;
                font-weight: bold;
                color: #AFAFAF;
            }
        </style>
        <h:form id="customerPaymentRecordForm" style="font-size: 85%">
            <h2>Create Customer Payment Record</h2>
            <br/>
            <p:commandButton styleClass="ui-commandButton-wizard-unselected" value="Step 1: Enter Customer Payment Details" image="ui-icon ui-icon-circle-triangle-e" />
            <p:commandButton styleClass="ui-commandButton-wizard-selected" value="Step 2: Create Receipt" image="ui-icon ui-icon-circle-triangle-e"/>
            <br/>
            <br/>
            <p:panel>
                <p:messages />
                <br/>
                <br/>
                <h:panelGrid columns="8" cellpadding="10" style="width: 100%">
                    <h:outputLabel style="font-weight: bold" value="Client Id: "/>
                    <h:outputText value="#{cprManagerBean.receipt.customerPaymentRecord.invoice.customer.clientId}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputLabel style="font-weight: bold" value="Receipt Number: "/>
                    <h:outputText value="#{cprManagerBean.receipt.receiptId}"/>

                    <h:outputLabel style="font-weight: bold" value="Company Name: "/>
                    <h:outputText id="companyName" value="#{cprManagerBean.cpr.invoice.customer.companyName}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputLabel style="font-weight: bold" value="Invoice ID: "/>
                    <h:outputText value="#{cprManagerBean.receipt.customerPaymentRecord.invoice.invoiceId}"/>


                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputLabel style="font-weight: bold" value="Payment Record ID: "/>
                    <h:outputText value="#{cprManagerBean.receipt.customerPaymentRecord.customerPaymentRecordId}"/>

                    <h:outputLabel style="font-weight: bold" value="Finance Accountant: "/>
                    <h:outputText value="#{cprManagerBean.receipt.financeAccountant}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputLabel style="font-weight: bold" value="Receipt Date: "/>
                    <h:outputText id="clientId" value="#{cprManagerBean.receipt.receiptDate}">
                        <f:convertDateTime pattern="MMMM dd, yyyy"/>
                    </h:outputText>
                </h:panelGrid>

                <br/>
                <br/>
                <br/>
                <h:outputText value="Order Items" style="font-weight: bold; font-size: 110%"/>
                <p:separator/> 
                <br/>
                <p:dataTable id="olilTable" var="oneIL" value="#{cprManagerBean.receipt.deliveryOrder.itemLines}" emptyMessage="No products selected">
                    <p:column headerText="Product Type" rendered="#{oneIL.qtyOrderedCase != 0}">
                        <h:outputText value="#{oneIL.product.productType}"/>
                    </p:column>
                    <p:column headerText="Quantity Ordered Case" rendered="#{oneIL.qtyOrderedCase != 0}">
                        <h:outputText value="#{oneIL.qtyOrderedCase}"/>
                    </p:column>
                    <p:column headerText="Unit Price (SGD)" rendered="#{(oneIL.qtyOrderedCase != 0) &amp;&amp; (soManagerBean.salesOrder.currency)}">
                        <h:outputText value="#{oneIL.unitPriceSGD}" />
                    </p:column>
                    <p:column headerText="Unit Price (USD)" rendered="#{(oneIL.qtyOrderedCase != 0) &amp;&amp; (!soManagerBean.salesOrder.currency)}">
                        <h:outputText value="#{oneIL.unitPriceUSD}" />
                    </p:column>
                    <p:column headerText="Order Discount" rendered="#{oneIL.qtyOrderedCase != 0}">
                        <h:outputText value="#{oneIL.orderDiscount}" />
                    </p:column>
                    <p:column headerText="Special Discount" rendered="#{oneIL.qtyOrderedCase != 0}">
                        <h:outputText value="#{oneIL.specialDiscount}" />
                    </p:column>
                    <p:column headerText="Sub-total" rendered="#{oneIL.qtyOrderedCase != 0}">
                        <h:outputText value="#{oneIL.subTotal}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>
                </p:dataTable>

                <br/>
                <br/>
                <div align="right">
                    <h3>
                        <h:panelGrid columns ="2" cellpadding="2" style="text-align: right">
                            <h:outputLabel style="font-weight: bold" value="Sub-total: "/>
                            <h:outputText value="#{cprManagerBean.receipt.customerPaymentRecord.invoice.subtotal}">
                                <f:convertNumber type="currency" />
                            </h:outputText>
                            <h:outputLabel style="font-weight: bold" value="Tax: "/>
                            <h:outputText value="#{cprManagerBean.receipt.customerPaymentRecord.invoice.tax}">
                                <f:convertNumber type="currency" />
                            </h:outputText>
                        </h:panelGrid>
                    </h3>
                    <h2>
                        <h:panelGrid columns ="2" cellpadding="10">
                            <h:outputLabel for="total" style="font-weight: bold" value="Total: "/>
                            <h:outputText id="total" value="#{cprManagerBean.receipt.customerPaymentRecord.invoice.total}">
                                <f:convertNumber type="currency" />
                            </h:outputText>
                        </h:panelGrid>
                    </h2>
                </div>

                <br/>
                <br/>
                <br/>
                <h:outputText value="Payment Details" style="font-weight: bold; font-size: 110%"/>
                <p:separator/> 
                <br/>
                <h:panelGrid columns="2" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Cash-in-advance: "/>
                    <h:selectBooleanCheckbox value="#{cprManagerBean.receipt.customerPaymentRecord.cashInAdvance}" disabled="true"/>
                    <h:outputLabel style="font-weight: bold" value="Payment Method: "/>
                    <h:selectOneMenu value="#{cprManagerBean.receipt.customerPaymentRecord.paymentMethod}" disabled="true">
                        <f:selectItem itemLabel="-- Select One --" itemValue=""/>
                        <f:selectItem itemLabel="Cash" itemValue="Cash"/>
                        <f:selectItem itemLabel="Cheque" itemValue="Cheque"/>
                        <f:selectItem itemLabel="Credit Card" itemValue="Credit Card"/>
                        <f:selectItem itemLabel="PayPal" itemValue="PayPal"/>
                    </h:selectOneMenu>
                    <h:outputLabel style="font-weight: bold" value="Amount: "/>
                    <h:outputText value="#{cprManagerBean.receipt.customerPaymentRecord.paymentAmount}">
                        <f:convertNumber type="currency"/>
                    </h:outputText>
                </h:panelGrid>

                <br/>
                <br/>
                <br/>



                <br/>
                <br/>
                <p:separator style="height:1px; border-color: #000000; color: #000000; background-color: #000000; outline-color: #000000"/> 
                <br/>
                <div align="right">
                    <h2>
                        <h:panelGrid  columns="2" cellpadding="10">
                            <h:outputLabel style="font-weight: bold" value="Amount Received: "/>
                            <h:outputText id="amountDue" value="#{cprManagerBean.receipt.customerPaymentRecord.paymentAmount}">
                                <f:convertNumber type="currency"/>
                            </h:outputText>
                        </h:panelGrid>
                    </h2>
                </div>
                <br/>
            </p:panel>
            <br/>
            <br/>
            <br/>
            <div align="right">
                <p:commandButton value="Cancel" action="#{cprManagerBean.cancel()}"/>
                <p:commandButton value="Create Receipt" update="customerPaymentRecordForm" action="#{cprManagerBean.saveReceipt()}"/>
            </div>
            <br/>
            <br/>
            <br/>
        </h:form>
        
    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
